<template>
  <div class="login-page">
    <el-tabs class="login-card" v-model="activeTab" type="border-card">
      <el-tab-pane label="登录" name="login">
        <el-form :model="form" ref="formRef" label-width="80px">
          <el-form-item label="用户名" required prop="userName">
            <el-input v-model="form.userName" />
          </el-form-item>
          <el-form-item label="密码" required prop="password">
            <el-input v-model="form.password"  show-password type="password" />
          </el-form-item>
          <el-button size="small"  round :disabled="submitLoading" class="login-submit"  type="primary" @click="handleLogin(formRef)">登录</el-button>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="注册"  name="register">
        <el-form :model="registerForm" ref="registerFormRef" :rules="registerRules" label-width="80px">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="registerForm.userName" />
          </el-form-item>
          <el-form-item label="密码" prop="password" required>
            <el-input v-model="registerForm.password"  show-password type="password" />
          </el-form-item>
          <el-form-item label="类型" prop="role">
            <el-select
                v-model="registerForm.role"
                placeholder="请选择用户类型"
            >
              <el-option label="管理员" value="admin"/>
              <el-option label="用户" value="user"/>
            </el-select>
          </el-form-item>
          <el-button size="small" round class="login-submit" type="primary" :disabled="submitLoading"  @click="handleRegister(registerFormRef)">注册</el-button>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
const router = useRouter();
import {ElMessage} from "element-plus";
const submitLoading = ref(false)
const formRef = ref(null);
const form = ref({
  userName: 'admin',
  password: '2013fYs0@9'
});
const store = useStore();
const activeTab = ref('login')
const handleLogin = (formEl) => {
  if(!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      try {
        submitLoading.value = true
        await store.dispatch('login', form.value);
        router.push('/')
        submitLoading.value = false
      } catch (error) {
        ElMessage.error(error.message);
      }
    }else {
      ElMessage.error('请输入登录信息');
    }
  })
};

const registerFormRef = ref(null);
const passValidate = (rule, value, callback) => {
  const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
  if (!value) {
    callback(new Error("请输入密码"));
  } else if (!reg.test(value)) {
    callback(new Error("密码必须是8位以上、必须含有字母、数字、特殊符号"));
  } else {
    callback();
  }
}
const registerRules = {
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    {validator: passValidate, trigger: 'blur'}
  ],
  role: [
    { required: true, message: '请选择用户类型', trigger: 'change' }
  ],
}
const registerForm = ref({
  userName: '',
  password: '',
  role: 'admin'
});
const handleRegister = async (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      try {
        submitLoading.value = true
        await store.dispatch('register', registerForm.value);
        ElMessage.success('注册成功，请登录');
        activeTab.value = 'login'
        submitLoading.value = false
      } catch (error) {
        submitLoading.value = false
        ElMessage.error(error.message);
      }
    } else {
      ElMessage.error('请输入登录信息');
    }
  })
};
</script>
<style scoped>
.login-page {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f1f1f1;
}
.login-card{
  width: 400px;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  box-shadow: 0 4px 30px 0 rgba(23, 48, 137, 0.05);
}
.login-submit {
  margin-top: 6px;
  width: 100%;
  height: 36px;
}
</style>
